<template>
	<page-meta>
	    <navigation-bar
			title="设备维护计划--新增"
			background-color="#EEEEEE"
			front-color="#ffffff "
	    />
	</page-meta>
	<view class="layui-form addPlanFormW" lay-filter="layuiadmin-form-role" id="layuiadmin-form-role" style="margin: 20px">
		<form @submit="submitForm">
			<uni-section title="基本信息" type="line"></uni-section>
			<view class="layui-row basicInfo form-row">
			  <view class="layui-col-md6">
			    <view class="layui-form-item">
			        <label class="layui-form-label">站台名称:</label>
					<xfl-select
						:list="stationNameList"
						:clearable="true"
						:showItemNum="5" 
						:listShow="false"
						:isCanInput="false"  
						:style_Container="'height: 50px; font-size: 16px;'"
						:option="optionConf"
						@change="stationNameChange($event)"
						@clear="stationNameChange($event)"
						:selectHideType="'hideAll'"></xfl-select>
				</view>
				<view class="layui-form-item">
				    <label class="layui-form-label">专业:</label>
				    <xfl-select
				    	:list="doMainList"
				    	:clearable="true"
				    	:showItemNum="5" 
				    	:listShow="false"
				    	:isCanInput="false"  
				    	:style_Container="'height: 50px; font-size: 16px;'"
				    	:option="optionConf"
				    	@change="doMainChange($event)"
						@clear="doMainChange($event)"
				    	:selectHideType="'hideAll'"></xfl-select>
				</view>
			    <view class="layui-form-item">
			        <label class="layui-form-label">系统名称:</label>
			        <xfl-select
						ref='systemName'
			        	:list="systemNameList"
			        	:clearable="true"
			        	:showItemNum="5" 
			        	:listShow="false"
			        	:isCanInput="false"  
			        	:style_Container="'height: 50px; font-size: 16px;'"
			        	:option="optionConf"
			        	@change="systemNameChange($event)"
						@clear="systemNameChange($event)"
						placeholder="请先选择专业"
			        	:selectHideType="'hideAll'"></xfl-select>
			    </view>
				<view class="layui-form-item">
				    <label class="layui-form-label">设备类型:</label>
				    <xfl-select
						ref='eventType'
				    	:list="eventTypeList"
				    	:clearable="true"
				    	:showItemNum="5" 
				    	:listShow="false"
				    	:isCanInput="false"  
				    	:style_Container="'height: 50px; font-size: 16px;'"
				    	:option="optionConf"
				    	@change="eventTypeChange($event)"
						@clear="eventTypeChange($event)"
						placeholder="请先选择系统"
				    	:selectHideType="'hideAll'"></xfl-select>
				</view>
			    <view class="layui-form-item">
			        <label class="layui-form-label">设备名称:</label>
			        <view class="layui-inline">
			            <input class="uni-input" name="eventName" placeholder="请输入" autocomplete="off"/>
			         </view>
			    </view>
				<view class="layui-form-item">
				    <label class="layui-form-label">维修方式:</label>
				    <view class="layui-inline">
				        <input class="uni-input" name="maintainWay" placeholder="请输入" autocomplete="off" value="计划维修" disabled/>
				    </view>
				</view>
			  </view>
			</view>
			<view class="layui-form" lay-filter="layuiadmin-form-role" id="layuiadmin-form-role">
			  <uni-section title="添加维修计划" type="line"></uni-section>
			  <view class="layui-row form-row addPlanForm">
			    <view >
					<view class="layui-form-item">
					    <label class="layui-form-label">维修状态:</label>
					    <xfl-select
					    	:list="statuList"
					    	:clearable="true"
					    	:showItemNum="5" 
					    	:listShow="false"
					    	:isCanInput="false"  
					    	:style_Container="'height: 50px; font-size: 16px;'"
					    	:option="optionConf"
					    	@change="statuChange($event)"
							@clear="statuChange($event)"
					    	:selectHideType="'hideAll'"></xfl-select>
					</view>
					<view class="layui-form-item">
						<label class="layui-form-label">是否维修计划:</label>
						<view class="layui-inline">
							<xfl-select
								:list="isPlanSelectList"
								:clearable="true"
								:showItemNum="5" 
								:listShow="false"
								:isCanInput="false"  
								:style_Container="'height: 50px; font-size: 16px;'"
								:option="optionConf"
								@change="isPlanChange($event)"
								@clear="isPlanChange($event)"
								:selectHideType="'hideAll'"></xfl-select>
						</view>
					</view>
			        <view class="layui-form-item">
			            <label class="layui-form-label">首次维修计划日期</label>
			            <view class="layui-inline">
			                <input
			                	name="maintainfirstTime"
			                	ref="maintainfirstTime" 
			                	:value="submitData.maintainfirstTime" 
			                	placeholder="请选择首次时间" 
			                	autocomplete="off" 
			                	class="uni-input"
			                	@click="showPop($event, 'maintainfirstTime')"
			                	disabled >
			            </view>
			        </view>
					<view class="layui-form-item">
					    <label class="layui-form-label">本次维护计划日期</label>
					    <input
					    	name="maintainthisTime"
					    	ref="maintainthisTime" 
					    	:value="submitData.maintainthisTime" 
					    	placeholder="请选择本次时间" 
					    	autocomplete="off" 
					    	class="uni-input"
					    	@click="showPop($event, 'maintainthisTime')"
					    	disabled>
					</view>
			        <view class="layui-form-item">
			            <label class="layui-form-label">下次维护计划日期</label>
			            <input
			            	name="maintainnextTime"
			            	ref="maintainnextTime" 
			            	:value="submitData.maintainnextTime" 
			            	placeholder="请选择下次时间" 
			            	autocomplete="off" 
			            	class="uni-input"
			            	@click="showPop($event, 'maintainnextTime')"
			            	disabled>
			        </view>
					<view class="layui-form-item">
					    <label class="layui-form-label">距离下次维修计划间隔(天)</label>
					    <input
					    	name="intervalDay"
					    	ref="intervalDay" 
					    	:value="submitData.intervalDay" 
					    	placeholder="请选择本次和下次时间" 
					    	autocomplete="off" 
					    	class="uni-input"
					    	disabled>
					</view>
			    </view>
			  </view>
			</view>
			<view class="submit-button">
			  <button type="primary" form-type="submit">提交</button>
			</view> 
		</form>
		<minPopup heightSize="500" :show="show" @close='close'>
			<minPicker 
				:endTime="endTime" 
				:startTime="startTimes" 
				@cancel="cancel" 
				@sure="sure"></minPicker>
		</minPopup>
		<uni-popup ref="popupMessage" type="center">
			<uni-popup-message type="error" :message="errorMessage" :duration="2000"></uni-popup-message>
		</uni-popup>
	  </view>
</template>

<script>
	
import minPicker from '@/components/min-picker/min-picker.vue'
import minPopup from '@/components/min-picker/min-popup.vue'
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	
export default {
	data () {
		return {
			doMainList: [],
			stationNameList: [],
			systemNameList: [],
			eventTypeList: [],
			statuList: [],
			show:false,
			startTimes:[2010,6,1],
			endTime: 2100,
			targetInputData: '',
			errorMessage: '',
			optionConf: {
				label: 'label',
				value: 'value'
			},
			submitData: {
				doMain: '',
				eventName: '',
				eventType: '',
				intervalDay: '',
				isPlan: '',
				maintainWay: '计划维修',
				maintainfirstTime: '',
				maintainnextTime: '',
				maintainthisTime: '',
				stationName: '',
				statu: '',
				systemName: '',				
			},
			isPlanSelectList: [
				{
					label: '是',
					value: '1'
				},
				{
					label: '否',
					value: '0'
				},
			],
		}
	},
	methods:{
		initDoMain () {
			this.$myRequest({
				url: '/devStatus/getDomain'
			}).then(rep => {
				this.doMainList = rep.result
			})
		},
		initStationName() {
			this.$myRequest({
				url: '/devStatus/getStation'
			}).then(rep => {
				this.stationNameList = rep.result
			})
		},
		initStatu() {
			this.$myRequest({
				url: '/devStatus/getStatus'
			}).then(rep => {
				this.statuList = rep.result
			})
		},
		doMainChange(e){
			if(e) {
				this.submitData.doMain = e.newVal.label
				this.$myRequest({
					url: '/devStatus/getSystem?parentId='+ e.newVal.value,
				}).then(rep => {
					this.systemNameList = rep.result
					this.$refs.systemName.onClear()
					this.$refs.eventType.onClear()
				})
			} else {
				this.submitData.doMain = ''
			}
		},
		systemNameChange(e){
			if(e) {
				this.submitData.systemName = e.newVal.label
				this.$myRequest({
					url: '/devStatus/getDevice?parentId='+ e.newVal.value,
				}).then(rep => {
					this.eventTypeList = rep.result
					this.$refs.eventType.onClear()
				})
			} else {
				this.submitData.systemName = ''
			}
		},
		eventTypeChange(e) {
			if (e) {
				this.submitData.eventType = e.newVal.label
			} else {
				this.submitData.eventType = ''
			}
		},
		stationNameChange(e) {
			if (e) {
				this.submitData.stationName = e.newVal.label
			} else {
				this.submitData.stationName = ''
			}
		},
		statuChange(e){
			if (e) {
				this.submitData.statu = e.newVal.value
			} else {
				this.submitData.statu = ''
			}
		},
		isPlanChange (e) {
			if (e) {
				this.submitData.isPlan = e.newVal.value
			} else {
				this.submitData.isPlan = ''
			}
		},
		
		//-------------------日期差值计算-----------------------------
		getDiff (now,next){
			if(!now || !next){
				return 
			}
			var days = new Date(next).getTime() - new Date(now).getTime();
			var time = parseInt(days / (1000 * 60 * 60 * 24));
			return time;
		},
		
		// ------------------日期选择器----------------------
		// 取消事件
		cancel(){
		    this.close()
		},
		// 确认事件
		sure(e){
			this.submitData[this.targetInputData] = e.a + '-' + e.b + '-' + e.c
			if(this. targetInputData === 'maintainnextTime' || this. targetInputData === 'maintainthisTime'){
				let interval = this.getDiff(this.submitData.maintainthisTime, this.submitData.maintainnextTime)
				this.submitData.intervalDay = interval
			}
		    // 输出 { year: 100100,month: 3,day: 23}
		},
		// picker显示
		showPop(event, paramName){
			this.targetInputData = paramName
		    this.show = true
		},
		// 关闭picker
		close(){
		    this.show = false
		},
		
		//----------------提交表单-------------------------
		submitForm (e) {
			uni.showLoading({
				title:"添加中，请稍等...",
				mask:true
			});
			let inputDatas = e.detail.value
			this.submitData.eventName = inputDatas.eventName
			this.$myRequest({
				url: '/et/maintain/addMaintain',
				method: 'POST',
				data: this.submitData
			}).then(rep => {
				if(rep.code === 'success'){
					uni.navigateTo({
						url:'./equipmentPlan',
						success: res => {
							console.log('跳转成功');
						},
						fail: res => {
							console.log(res);
						},
					});
				}else {
					this.$refs.popupMessage.open()
					this.errorMessage = rep.message
				}
			})
		}			
	},
	components:{
		minPicker,
		minPopup,
		uniPopupMessage,
	},
	created() {
		this.initDoMain(),
		this.initStationName(),
		this.initStatu()
	}
}
</script>

<style>
	.popup-content {
		background-color: #fff;
		padding: 15px;
	}
	
	.submit-button {
		margin: 50rpx 30rpx 0rpx;
	}
</style>
